<template>
  <div class="certification-wrapper">
    <c-title :hide="false" text="付款记录凭证"></c-title>
    <div class="pay-info">
      <span class="upload-voucher">上传凭证</span>
      <van-cell-group>
        <van-field
          v-model="amount"
          required
          label="金额"
          @input="amountInput"
          label-width="30"
          maxlength="18"
          placeholder="请输入充值金额"
        />
        <van-field
          v-model="remarks"
          label="备注"
          label-width="30"
          type="textarea"
          placeholder="请输入备注"
        />
      </van-cell-group>
      <van-cell required title="付款凭证">
        <div class="accounts-box">
          <div>
            <van-uploader :after-read="onRead">
              <div class="img-box avatar">
                <img :src="imageUrl
                  ? imageUrl
                  : require('../../../assets/images/up_icon.png')"
                />
              </div>
            </van-uploader>
          </div>
        </div>
      </van-cell>
    </div>
    <div class="remittance-info">
      <div class="top-tip">
        <span class="message-sty">汇款信息</span>
        <span class="copy-sty" v-clipboard:copy="clipboardValue" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
      </div>
      <span class="remittance-item">开户行：{{ remittanceInfo.remittance_bank }}</span>
      <span class="remittance-item">开户支行：{{ remittanceInfo.remittance_sub_bank }}</span>
      <span class="remittance-item">开户名：{{ remittanceInfo.remittance_bank_account_name }}</span>
      <span class="remittance-item">开户账号：{{ remittanceInfo.remittance_bank_account }}</span>
      <span class="remittance-item">
        付款码：
        <img :src="remittanceInfo.remittance_sub_bank_img" class="remittance_sub_bank_img" />
      </span>
    </div>
    <div class="bottom-btn">
      <span @click="confirmEvent" class="line-pay">提交</span>
    </div>
  </div>
</template>

<script>
import certification_controller from './certification_controller';
export default certification_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.certification-wrapper {

  .pay-info {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0.72rem;
    background-color: #fff;
    margin: 0.5rem;

    .upload-voucher {
      color: #2b2b2b;
      margin-bottom: 0.78rem;
      font-weight: 600;
    }

    span {
      display: flex;
    }

    .accounts-box {
      background-color: white;
      display: flex;
      justify-content: flex-end;
    }

    .img-box {
      height: 3.31rem;
      width: 3.31rem;
      border: 1px dashed #666;
      display: flex;
    }

    .avatar {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        margin: inherit;
        width: 50%;
        height: 50%;
      }
    }
  }

  .remittance-info {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0.72rem;
    background-color: #fff;
    margin: 0.5rem;
    text-align: left;

    .top-tip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.6rem;

      .message-sty {
        color: #2b2b2b;
        font-weight: 600;
      }

      .copy-sty {
        border: 1px solid #ef3532;
        border-radius: 0.1rem;
        color: #ef3532;
        padding: 0.28rem 0.75rem;
      }
    }

    .remittance-item {
      line-height: 1;
      margin-bottom: 0.82rem;
      color: #666;
      display: flex;

      .remittance_sub_bank_img {
        width: 200px;
        margin: 0;
        display: inline;
      }
    }
    
  }

  .bottom-btn {
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 0.36rem 0.56rem;

    .line-pay {
      padding: 0.55rem 0;
      width: 100%;
      color: white;
      background: #ef3532;
      border-radius: 0.25rem;
    }
  }
}
</style>